<template>
  <div v-if="value!=null" class="order-status text-center">
    <div v-if="dispatch">
      <div v-if="value.dispatch==1" class="alert alert-success is-center">
        已发货
      </div>
      <div v-else class="alert alert-danger is-center red">
        未发货
      </div>
    </div>
    <div v-if="arrival">
      <div v-if="value.arrival==1" class="alert alert-info is-center">
        在途
      </div>
      <div v-else-if="value.arrival==2" class="alert alert-success is-center">
        已到货
      </div>
      <div v-else class="alert  alert-danger is-center red">
        缺货
      </div>
    </div>
    <div v-if="apply">
      <div v-if="value.apply==1" class="alert alert-success is-center">
        已申请发货
      </div>
      <div v-else class="alert alert-danger is-center red">
        未申请发货
      </div>
    </div>
    <div v-if="pay">
      <div v-if="value.pay==1" class="alert alert-success is-center">
        已付款
      </div>
      <div v-else class="alert alert-danger is-center red">
        未付款
      </div>
    </div>
    <div v-if="refund">
      <div v-if="value.refund==0" class="alert alert-danger is-center red">
        未申请退款
      </div>
      <div v-else-if="value.refund==1" class="alert alert-success is-center">
        已申请退款
      </div>
      <div v-else class="alert alert-info is-center">
        已完成退款
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'HOrderStatusDisplay',
    data() {
      return {}
    },
    props: {
      value: {
        type: Object,
        default: {}
      },
      arrival: {
        type: Boolean,
        default: false
      },
      apply: {
        type: Boolean,
        default: false
      },
      dispatch: {
        type: Boolean,
        default: false
      },
      pay: {
        type: Boolean,
        default: false
      },
      refund: {
        type: Boolean,
        default: false
      }
    }
  }
</script>
